<template>
  <div ref="bigbox">
    <div class="eltop">
      <div class="box">
        <img src="../assets/img/home/bg1.png" class="bg" />
        <div class="content">
          <img src="../assets/img/home/bga.png" class="icon" />
          <span class="name">今日营业额</span>
          <span class="num">{{ numInfo.num1 }}</span>
        </div>
      </div>
      <div class="box">
        <img src="../assets/img/home/bg2.png" class="bg" />
        <div class="content">
          <img src="../assets/img/home/bgb.png" class="icon" />
          <span class="name">历史订单</span>
          <span class="num">{{ numInfo.num2 }}</span>
        </div>
      </div>
      <div class="box">
        <img src="../assets/img/home/bg3.png" class="bg" />
        <div class="content">
          <img src="../assets/img/home/bgc.png" class="icon" />
          <span class="name">历史营业额</span>
          <span class="num">{{ numInfo.num3 }}</span>
        </div>
      </div>
      <div class="box">
        <img src="../assets/img/home/bg4.png" class="bg" />
        <div class="content">
          <img src="../assets/img/home/bgd.png" class="icon" />
          <span class="name">可提现金额</span>
          <span class="num">{{ numInfo.num4 }}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="box1">
          <p class="title"><span class="hr"></span>销量统计</p>
          <div class="echart_a" ref="echart_a"></div>
        </div>
        <div class="box2">
          <p class="title"><span class="hr"></span>近7天营业额</p>
          <div class="echart_b" ref="echart_b"></div>
        </div>
      </div>
      <!-- 近日订单 -->
      <div class="right">
        <div class="title">
          <span class="hr"></span>近日订单
          <div class="serbox">
            <el-date-picker
              v-model="choDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <div style="margin-left: 15px">
              <!-- <el-input size="medium"
                        placeholder="请输入内容"
                        suffix-icon="el-icon-search"
                        @keyup.enter.native="$event.target.blur"
                        @blur="search"
                        v-model="searchText">
              </el-input> -->
              <el-input
                size="medium"
                placeholder="请输入内容"
                v-model="searchText"
              >
              </el-input>
            </div>
            <el-button
              type="primary"
              style="margin-left: 15px"
              size="medium"
              @click="search"
              >查询</el-button
            >
          </div>
        </div>
        <div class="table">
          <div class="tabTop">
            <span>商品信息</span>
            <span>单价</span>
            <span>数量</span>
            <span>买家</span>
            <span>订单状态</span>
            <span>实收款</span>
            <span>评价</span>
            <span>操作</span>
          </div>
          <div class="ul">
            <div class="none" v-if="tableDate.length <= 0">暂无数据</div>
            <div class="li" v-for="(item, index) in tableDate" :key="index">
              <div class="liTop">
                <!-- v-model="checked" -->
                <!-- <el-checkbox></el-checkbox> -->
                <span>订单号：{{ item.orderSn }}</span>
                <span>创建时间：{{ item.createAt }}</span>
              </div>
              <div class="cont">
                <div class="td com">
                  <img :src="item.imgurl" />
                  <div class="comright">
                    <p class="name">{{ item.goodsName }}</p>
                    <p class="spec">规格：{{ item.specName }}</p>
                  </div>
                </div>
                <div class="td text1">￥{{ item.price }}</div>
                <div class="td text1">{{ item.total }}</div>
                <div class="td text1">{{ item.userName }}</div>
                <div class="td type">
                  <p>{{ item.statusText }}</p>
                  <p
                    class="send"
                    v-if="item.status == 3"
                    @click="sendSub(item.id)"
                  >
                    发货
                  </p>
                  <p
                    class="send"
                    v-else-if="item.status == 5"
                    @click="sendpop = true"
                  >
                    确认收货
                  </p>
                  <p class="send sended" v-else>已发货</p>
                </div>
                <div class="td money">
                  <p>￥{{ item.payment }}</p>
                  <p>含快递：￥{{ item.postFee }}</p>
                </div>
                <div class="td">
                  <div class="evl" v-if="item.coment == 0">未评价</div>
                  <div class="evl evled" v-else>已评价</div>
                </div>
                <div class="td set">
                  <span @click="setdetail(index)">详情</span>
                  <span
                    @click="wuliuInfo = true"
                    v-if="item.status !== 3 && item.status !== 5"
                    >物流</span
                  >
                  <span @click="rsetAds(index)" v-if="item.status == 3"
                    >修改</span
                  >
                  <span @click="orderInfo(item.id)">订单信息</span>
                </div>
              </div>
            </div>
            <div class="page">
              <el-pagination
                background
                @current-change="changePage"
                :current-page.sync="page"
                :page-size="pageSize"
                layout="total,prev,pager,next,jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="orderpop">
      <!-- 发货弹框 -->
      <div class="sendpop">
        <el-dialog title="发货" :visible.sync="sendpop" width="30%">
          <el-form label-width="100px" :model="sendform">
            <el-form-item label="物流名称">
              <el-select v-model="sendform.region" placeholder="请选择物流名称">
                <el-option
                  :label="item.name"
                  v-for="item in logList"
                  :key="item.id"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物流单号">
              <el-input
                v-model="sendform.name"
                placeholder="请输入物流单号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendSubmit(sendform)"
                >确 定</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 详情弹框 -->
      <div class="detailpop">
        <el-dialog title="详情" :visible.sync="detailpop" width="30%">
          <el-form label-width="120px" :model="detailform">
            <el-form-item label="商品图片">
              <img :src="detailform.img" class="tu" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="detailform.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="规格">
              <el-input v-model="detailform.spec" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input v-model="detailform.num" disabled></el-input>
            </el-form-item>
            <el-form-item label="单价">
              <el-input v-model="detailform.price" disabled></el-input>
            </el-form-item>
            <el-form-item label="总价">
              <el-input v-model="detailform.totalprice" disabled></el-input>
            </el-form-item>
            <el-form-item label="留言">
              <el-input
                type="textarea"
                v-model="detailform.evl"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 修改弹框 -->
      <div class="setpop">
        <el-dialog title="修改" :visible.sync="setpop" width="30%">
          <el-form label-width="100px" :model="setform">
            <el-form-item label="收件人">
              <el-input
                v-model="setform.name"
                placeholder="请输入收件人"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                v-model="setform.phone"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="地区">
              <el-cascader
                placeholder="请选择地区"
                :options="options"
                v-model="setform.provinceCityArea"
                @change="changeCity"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model="setform.address"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="setSubmit(setform)"
                >确 定</el-button
              >
              <el-button @click="setpop = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 订单信息弹框 -->
      <div class="oidinfopop">
        <el-dialog title="订单信息" :visible.sync="oidinfopop" width="30%">
          <el-form label-width="120px" :model="oidinfoform">
            <el-form-item label="订单号">
              <el-input v-model="oidinfoform.num" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单总额">
              <el-input v-model="oidinfoform.total" disabled></el-input>
            </el-form-item>
            <el-form-item label="运费金额">
              <el-input v-model="oidinfoform.postfee" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单时间">
              <el-input v-model="oidinfoform.ordertime" disabled></el-input>
            </el-form-item>
            <el-form-item label="发货时间">
              <el-input v-model="oidinfoform.sendtime" disabled></el-input>
            </el-form-item>
            <el-form-item label="付款时间">
              <el-input v-model="oidinfoform.paytime" disabled></el-input>
            </el-form-item>
            <el-form-item label="物流单号">
              <el-input v-model="oidinfoform.logistics" disabled></el-input>
            </el-form-item>
            <el-form-item label="买家留言">
              <el-input
                type="textarea"
                v-model="detailform.evl"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 物流信息弹框 -->
      <div class="wuliu">
        <el-dialog title="物流信息" :visible.sync="wuliuInfo" width="30%">
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from "echarts";
import arr from "../assets/js/districts";
export default {
  data() {
    return {
      wuliuInfo: false,
      numInfo: {}, // 顶部四个数字
      myChart_a: {},
      myChart_b: {},
      choDate: ["", ""], // 选择的日期
      searchText: "", // 搜索内容
      page: 1,
      pageSize: 10,
      total: 0,
      tableDate: [], // 订单表单
      sendpop: false,
      sendform: {
        name: "",
        region: "",
      },
      detailpop: false,
      detailform: {},
      setpop: false,
      options: [], // 省市区
      selectedOptions: [],
      cityArr: [], // 城市列表
      areaArr: [], // 区县列表
      setform: {},
      oidinfopop: false,
      oidinfoform: {},
      logList: [],
      echartsDate1: {
        nameList: [],
        dateList: [],
      },
      echartsDate2: {
        dayList: [],
        numList: [],
      },
    };
  },
  created() {
    this.$nextTick(() => {
      this.loadEchart_a();
      this.loadEchart_b();
    });
  },
  mounted() {
    const that = this;
    window.onresize = function () {
      that.myChart_a.resize();
      that.myChart_b.resize();
    };
    this.initDistPicker(); // 初始化选择器
    this.getOrderList();
    this.getlog();
    this.getechartDate1();
    this.getechartDate2();
  },
  watch: {
    echartsDate1: {
      handler: function () {
        this.$nextTick(() => {
          if (this.echartsDate1) {
            this.loadEchart_a();
          }
        });
      },
      deep: true,
    },
    echartsDate2: {
      handler: function () {
        this.$nextTick(() => {
          if (this.echartsDate2) {
            this.loadEchart_b();
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    loadEchart_a() {
      this.myChart_a = Echarts.init(this.$refs.echart_a);
      this.myChart_a.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: 10,
          data: this.echartsDate1.numList,
        },
        color: ["#1A69E0", "#1ABDE0", "#1AE0D0", "#1AE08E"],
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.echartsDate1.dateList,
          },
        ],
      });
    },
    loadEchart_b() {
      this.myChart_b = Echarts.init(this.$refs.echart_b);
      this.myChart_b.setOption({
        color: ["#1A69E0"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.echartsDate2.dayList,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            label: {
              show: true,
              position: "top",
              color: "#808080",
            },
            data: this.echartsDate2.numList,
          },
        ],
      });
    },
    // 获取饼状图数据
    getechartDate1() {
      this.$postRequest("/mall/orderOrder/index/list", {
        shopId: sessionStorage.getItem("shopId"),
      }).then((res) => {
        var arr = [];
        for (var i = 0; i < res.data.nameList.length; i++) {
          var obj = {
            value: res.data.numList[i],
            name: res.data.nameList[i],
          };
          arr.push(obj);
        }
        this.echartsDate1.dateList = arr;
        this.numInfo = {
          num1: res.data.todayMoney,
          num2: res.data.allNum,
          num3: res.data.allMoney,
          num4: res.data.myMoney,
        };
      });
    },
    // 获取柱形图图数据
    getechartDate2() {
      this.$postRequest("/mall/orderOrder/count/info", {
        shopId: sessionStorage.getItem("shopId"),
        classId: "",
        beginAt: "",
        endAt: "",
      }).then((res) => {
        this.echartsDate2.dayList = res.data.dayList;
        this.echartsDate2.numList = res.data.moneyList;
      });
    },
    // 获取订单列表
    getOrderList() {
      if (!this.choDate) {
        this.choDate = ["", ""];
      }
      this.$postRequest("/mall/orderOrder/list", {
        shopId: sessionStorage.getItem("shopId"),
        orderSn: this.searchText,
        status: 0,
        beginAt: this.choDate[0],
        endAt: this.choDate[1],
        pageNum: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].createAt = this.$util.gettime(
            new Date(res.rows[i].createAt)
          );
          if (res.rows[i].status == 1) {
            res.rows[i].statusText = "待支付";
          } else if (res.rows[i].status == 3) {
            res.rows[i].statusText = "待发货";
          }
          if (res.rows[i].status == 4) {
            res.rows[i].statusText = "待收货";
          }
          if (res.rows[i].status == 5) {
            res.rows[i].statusText = "退货中";
          }
          if (res.rows[i].status == 6) {
            res.rows[i].statusText = "退货成功";
          }
          if (res.rows[i].status == 7) {
            res.rows[i].statusText = "订单完成";
          }
          if (res.rows[i].status == 8) {
            res.rows[i].statusText = "订单取消";
          }
        }
        this.tableDate = res.rows;
      });
    },
    // 详情按钮
    setdetail(index) {
      this.detailpop = true;
      this.detailform = {
        img: this.tableDate[index].imgurl,
        name: this.tableDate[index].goodsName,
        spec: this.tableDate[index].specName,
        num: this.tableDate[index].total,
        price: this.tableDate[index].price,
        totalprice: this.tableDate[index].allPrice,
        evl: this.tableDate[index].buyerMsg,
      };
    },
    // 修改按钮
    rsetAds(index) {
      this.setpop = true;
      this.setform = {
        id: this.tableDate[index].id,
        name: this.tableDate[index].receiverName,
        phone: this.tableDate[index].receiverPhone,
        address: this.tableDate[index].receiverAddress,
        provinceCityArea: [],
        province: this.tableDate[index].receiverProvince,
        city: this.tableDate[index].receiverCity,
        area: this.tableDate[index].receiverCounty,
      };
      // 转换省市区码
      this.isCity();
    },
    // 获取订单详情
    orderInfo(id) {
      this.$getRequest("/mall/orderOrder/" + id, {}).then((res) => {
        this.oidinfoform = {
          num: res.data.orderSn,
          total: res.data.payment,
          postfee: res.data.postFee,
          ordertime: res.data.createAt
            ? this.$util.gettime(new Date(res.data.createAt))
            : "",
          sendtime: res.data.consignAt
            ? this.$util.gettime(new Date(res.data.consignAt))
            : "",
          paytime: res.data.payAt
            ? this.$util.gettime(new Date(res.data.payAt))
            : "",
          logistics: res.data.shippingCode,
          msg: res.data.buyerMsg,
        };
        this.oidinfopop = true;
      });
    },
    // 获取物流名称表
    getlog() {
      this.$postRequest("/mall/shopExpressCode/list", {}).then((res) => {
        this.logList = res.data;
      });
    },
    // 提交发货
    sendSubmit(e) {
      if (e.name == "" || e.region == "") {
        this.$message.error("请将内容补充完整");
      } else {
        this.$postRequest("/mall/orderOrder/deliverGoods", {
          shippingName: e.region,
          shippingCode: e.name,
          shopId: sessionStorage.getItem("shopId"),
          orderId: this.sendId,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("发货成功");
            this.getOrderList();
            this.sendpop = false;
          }
        });
      }
    },
    // 发货
    sendSub(id) {
      this.sendId = id;
      this.sendpop = true;
      this.sendform = { name: "", region: "" };
    },
    // 搜索框
    search() {
      this.getOrderList();
    },
    // 分页
    changePage(val) {
      this.page = val;
      this.getOrderList();
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
    },
    setSubmit(e) {
      this.$postRequest("/mall/orderOrder/editAddress", {
        orderId: e.id,
        shopId: sessionStorage.getItem("shopId"),
        receiverName: e.name,
        receiverPhone: e.phone,
        receiverProvince: e.province,
        receiverCity: e.city,
        receiverCounty: e.area,
        receiverAddress: e.address,
      }).then((res) => {
        this.$message.success("修改成功");
        this.getOrderList();
        this.setpop = false;
      });
    },
    // 初始化选择器
    initDistPicker() {
      let distData = arr.arr;
      let options = [];
      // 省
      for (var provinceKy in distData["100000"]) {
        let optProvinceItem = {
          value: provinceKy,
          label: distData["100000"][provinceKy],
        };
        if (distData[provinceKy]) {
          // 市
          for (var cityKy in distData[provinceKy]) {
            optProvinceItem.children = optProvinceItem.children
              ? optProvinceItem.children
              : [];
            let optCityItem = {
              value: cityKy,
              label: distData[provinceKy][cityKy],
            };
            if (distData[cityKy]) {
              // 区
              for (var areaKy in distData[cityKy]) {
                optCityItem.children = optCityItem.children
                  ? optCityItem.children
                  : [];
                let optAreaItem = {
                  value: areaKy,
                  label: distData[cityKy][areaKy],
                };
                optCityItem.children.push(optAreaItem);
              }
            }
            optProvinceItem.children.push(optCityItem);
          }
        }
        options.push(optProvinceItem);
      }
      this.distData = distData;
      this.options = options;
    },
    // 切换城市
    changeCity(value) {
      this.options.map((item, index) => {
        if (item.value == value[0]) {
          this.cityArr = item.children; //存储城市列表
          this.setform.province = item.label;
        }
      });
      //获取市名
      this.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          this.areaArr = item.children; //存储区县列表
          this.setform.city = item.label;
        }
      });
      //获取区县名
      this.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          this.setform.area = item.label;
        }
      });
    },
    // 判断是否有城市(有的话转码)
    isCity() {
      this.options.map((item, index) => {
        if (item.label == this.setform.province) {
          this.cityArr = item.children; //存储城市列表
          this.setform.provinceCityArea[0] = item.value;
        }
      });
      //获取市名
      this.cityArr.map((item, index) => {
        if (item.label == this.setform.city) {
          this.areaArr = item.children; //存储区县列表
          this.setform.provinceCityArea[1] = item.value;
        }
      });
      //获取区县名
      this.areaArr.map((item, index) => {
        if (item.label == this.setform.area) {
          this.setform.provinceCityArea[2] = item.value;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../assets/css/orderpop.css");
.eltop {
  display: flex;
  justify-content: space-between;
  .box {
    width: 25%;
    position: relative;
    .bg {
      width: 100%;
      height: 180px;
    }
    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      .icon {
        height: 40px;
        width: 40px;
      }
      .name {
        width: 100px;
        padding-left: 15px;
        font-size: 18px;
      }
      .num {
        font-size: 28px;
        font-weight: bold;
        width: calc(100% - 220px);
        text-align: right;
      }
    }
  }
}
.main {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .title {
    line-height: 55px;
    margin: 0 20px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 13px;
    .hr {
      background: #1a69e0;
      height: 20px;
      width: 6px;
      margin-right: 10px;
    }
    .serbox {
      height: 55px;
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .left {
    width: 610px;
    .box1 {
      background: #fff;
      height: 400px;
      .echart_a {
        height: 345px;
      }
    }
    .box2 {
      background: #fff;
      margin-top: 20px;
      height: 360px;
      .echart_b {
        height: 305px;
      }
    }
  }
  .right {
    width: calc(100% - 630px);
    background: #fff;
    .table {
      margin: 20px;
      .tabTop {
        height: 40px;
        background: #f9f9f9;
        border: 1px solid #eeeeee;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 12px;
        span {
          width: 11%;
          text-align: center;
        }
        span:nth-of-type(1) {
          width: 22%;
        }
      }
      .ul {
        .none {
          text-align: center;
          line-height: 200px;
          color: #999;
          font-size: 12px;
        }
        .li {
          margin-top: 20px;
          .liTop {
            height: 40px;
            background: #f3f7fd;
            display: flex;
            align-items: center;
            padding: 0 20px;
            > span {
              font-size: 12px;
              margin: 0 10px;
            }
            > span:nth-of-type(1) {
              margin-right: 100px;
            }
          }
          .cont {
            height: 120px;
            border: 1px solid #eeeeee;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .td {
              box-sizing: border-box;
              width: 11%;
              // border: 1px solid blue;
              text-align: center;
              padding: 0 5px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .td:nth-of-type(1) {
              width: 22%;
            }
            .com {
              display: flex;
              align-items: center;
              justify-content: space-between;
              text-align: left;
              img {
                height: 60px;
                width: 60px;
              }
              .comright {
                width: calc(100% - 68px);
                font-size: 12px;
                .name {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                }
                .spec {
                  color: #999;
                  margin: 5px 0 10px 0;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
            .text1 {
              font-size: 12px;
            }
            .type {
              font-size: 12px;
              p:nth-of-type(1) {
                color: #ec6941;
              }
              .send {
                width: 60px;
                height: 23px;
                background: #1a69e0;
                color: #fff;
                text-align: center;
                line-height: 25px;
                margin: 5px auto 0 auto;
                cursor: pointer;
              }
              .sended {
                background: #87ace4;
              }
            }
            .money {
              font-size: 12px;
              p:nth-of-type(1) {
                color: #d94511;
              }
              p:nth-of-type(2) {
                color: #999;
              }
            }
            .evl {
              width: 60px;
              height: 25px;
              background: #f3f7fe;
              border: 1px solid #1a69e0;
              color: #1a69e0;
              line-height: 25px;
              text-align: center;
              font-size: 12px;
              margin: 0 auto;
            }
            .evled {
              background: #e6fde8;
              border: 1px solid #00c431;
              color: #00c431;
            }
            .set {
              display: flex;
              flex-direction: column;
              align-items: center;
              font-size: 12px;
              color: #666;
              line-height: 25px;
              span {
                cursor: pointer;
              }
              span:hover {
                color: #1a69e0;
              }
            }
          }
        }
        .page {
          text-align: center;
          margin-top: 20px;
        }
        /deep/
          .page
          .el-pagination.is-background
          .el-pager
          li:not(.disabled).active {
          background: #1a69e0;
        }
      }
    }
  }
}
</style>